﻿<template>
  <h2>支付管理</h2>
  <div class="payment-management">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-row">
          <div class="form-item">
            <label>标题</label>
            <input 
              v-model="searchForm.title" 
              type="text" 
              placeholder="请输入标题"
              class="form-input"
            />
          </div>
          
          <div class="form-item">
            <label>提交时间</label>
            <input 
              v-model="searchForm.submittedTime" 
              type="date" 
              placeholder="请选择提交时间"
              class="form-input"
            />
          </div>
          
          <div class="form-item">
            <label>审批状态</label>
            <select v-model="searchForm.approvalStatus" class="form-select">
              <option value="">全部</option>
              <option value="0">待提交</option>
              <option value="1">待审批</option>
              <option value="2">已通过</option>
              <option value="3">已拒绝</option>
            </select>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-item">
            <label>审批人姓名</label>
            <input 
              v-model="searchForm.approvalByName" 
              type="text" 
              placeholder="请输入审批人姓名"
              class="form-input"
            />
          </div>
          
          <div class="form-actions">
            <button @click="handleSearch" class="btn btn-primary" :disabled="loading">
              <span class="icon"></span>
              {{ loading ? '查询中...' : '查询' }}
            </button>
            <button @click="handleReset" class="btn btn-secondary" :disabled="loading">
              <span class="icon"></span>
              重置
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <button @click="handleAdd" class="btn btn-primary">
        新增
      </button>
      <button @click="handleDelete" class="btn btn-primary">
        删除
      </button>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <div v-if="loading" class="loading-indicator">
        正在加载数据...
      </div>
      <table class="data-table" v-else>
        <thead>
          <tr>
            <th>
              <input 
                type="checkbox" 
                v-model="selectAll"
                @change="handleSelectAll"
                class="checkbox"
              />
            </th>
            <th>标题</th>
            <th>用途描述</th>
            <th>付款金额</th>
            <th>付款方式</th>
            <th>支付对象</th>
            <th>申请人</th>
            <th>付款日期</th>
            <th>创建时间</th>
            <th>审批状态</th>
            <th>审批人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="tableData.length === 0">
            <td colspan="12" class="no-data">
              暂无数据
            </td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="item.id || index">
            <td>
              <input 
                type="checkbox" 
                v-model="item.selected"
                @change="handleSelectItem"
                class="checkbox"
              />
            </td>
            <td>{{ item.title || '-' }}</td>
            <td>{{ item.usageDescription || '-' }}</td>
            <td>{{ item.paymentAmount || '-' }}</td>
            <td>{{ item.paymentMethod || '-' }}</td>
            <td>{{ item.payee || '-' }}</td>
            <td>{{ item.requester || '-' }}</td>
            <td>{{ formatDate(item.paymentDate) }}</td>
            <td>{{ formatDate(item.createdTime) }}</td>
            <td>
              <span :class="['status-badge', getStatusClass(item.approvalStatus)]">
                {{ getStatusText(item.approvalStatus) }}
              </span>
            </td>
            <td>{{ item.approvalByName || '-' }}</td>
            <td>
              <div class="action-buttons">
                <!-- 编辑按钮 - 始终显示 -->
                <button 
                  @click="handleEdit(item)" 
                  class="btn-action btn-edit"
                  title="编辑"
                >
                  <span class="icon">✏️</span>编辑
                </button>
                
                <!-- 其他操作按钮 -->
                <button 
                  v-if="item.approvalStatus === 0" 
                  @click="handleSubmit(item)" 
                  class="btn-action btn-submit"
                  title="提交审批"
                >
                  <span class="icon">📤</span>提交审批
                </button>
                <button 
                  v-if="item.approvalStatus === 3" 
                  @click="handleResubmit(item)" 
                  class="btn-action btn-resubmit"
                  title="重新提交"
                >
                  <span class="icon">🔄</span>重新提交
                </button>
                <button 
                  @click="handleView(item)" 
                  class="btn-action btn-view"
                  title="查看详情"
                >
                  <span class="icon">👁️</span>查看
                </button>
                <button 
                  @click="handleDeleteItem(item)" 
                  class="btn-action btn-delete"
                  title="删除"
                >
                  <span class="icon">🗑️</span>删除
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <div class="pagination-info">
        共{{ totalPages }}页/{{ totalRecords }}条数据
      </div>
      <div class="pagination-controls">
        <button 
          @click="goToPage(currentPage - 1)" 
          :disabled="currentPage === 1 || loading"
          class="btn-pagination"
        >
          &lt;
        </button>
        
        <button 
          v-for="page in visiblePages" 
          :key="page"
          @click="goToPage(page)"
          :class="['btn-pagination', { active: page === currentPage }]"
          :disabled="loading"
        >
          {{ page }}
        </button>
        
        <button 
          v-if="showEllipsis"
          class="btn-pagination disabled"
        >
          ...
        </button>
        
        <button 
          v-if="showLastPage"
          @click="goToPage(totalPages)"
          :class="['btn-pagination', { active: currentPage === totalPages }]"
          :disabled="loading"
        >
          {{ totalPages }}
        </button>
        
        <button 
          @click="goToPage(currentPage + 1)" 
          :disabled="currentPage === totalPages || loading"
          class="btn-pagination"
        >
          &gt;
        </button>
      </div>
      
      <div class="pagination-jump">
        <span>跳至</span>
        <input 
          v-model="jumpToPage" 
          type="number" 
          min="1" 
          :max="totalPages"
          @keyup.enter="handleJumpToPage"
          class="jump-input"
          :disabled="loading"
        />
        <span>页</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { paymentApi } from '@/api'

const router = useRouter()

// 消息提示方法
const showSuccess = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-success'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 3000)
}

const showError = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-error'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 5000)
}

const showWarning = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-warning'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 4000)
}

// 定义接口类型
interface PaymentItem {
  id?: number
  title: string
  usageDescription?: string
  paymentAmount: number
  paymentMethod: string
  payee: string
  requester: string
  paymentDate: string
  approvalStatus: number
  approvalByName?: string
  submittedTime?: string
  approvalTime?: string
  createdTime: string
  selected?: boolean
  approvalTypeCode?: string  // 添加审批类型代码字段
}

// 搜索表单数据
const searchForm = reactive({
  title: '',
  submittedTime: '',
  approvalStatus: '',
  approvalByName: ''
})

// 表格数据
const tableData = ref<PaymentItem[]>([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalPages = ref(0)
const totalRecords = ref(0)
const jumpToPage = ref(1)
const loading = ref(false)

// 全选状态
const selectAll = ref(false)

// 计算属性
const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, start + 4)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  return pages
})

const showEllipsis = computed(() => {
  return totalPages.value > 5 && currentPage.value < totalPages.value - 2
})

const showLastPage = computed(() => {
  return totalPages.value > 5 && currentPage.value < totalPages.value - 2
})


// API调用函数
const fetchPaymentData = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params: any = {
      PageIndex: currentPage.value,
      PageSize: pageSize.value
    }
    
    if (searchForm.title && searchForm.title.trim()) {
      params.Title = searchForm.title.trim()
    }
    if (searchForm.submittedTime && searchForm.submittedTime.trim()) {
      // 将日期转换为ISO格式
      const date = new Date(searchForm.submittedTime)
      const isoDate = date.toISOString().split('T')[0] // 只取日期部分
      params.SubmittedTime = isoDate
    }
    if (searchForm.approvalStatus && searchForm.approvalStatus.trim()) {
      params.ApprovalStatus = searchForm.approvalStatus.trim()
    }
    if (searchForm.approvalByName && searchForm.approvalByName.trim()) {
      params.ApprovalByName = searchForm.approvalByName.trim()
    }

    const response = await paymentApi.getPayments(params)
    
    // 根据API响应结构处理数据
    if (response.data && response.data.code === 200 && response.data.data) {
      const { data, totalCount, totalPage } = response.data.data
      
      if (Array.isArray(data)) {
        tableData.value = data.map((item: any) => ({
          ...item,
          selected: false,
          approvalTypeCode: item.approvalTypeCode || ''  // 添加默认值
        }))
        
        // 使用API返回的分页信息
        totalRecords.value = totalCount || 0
        totalPages.value = totalPage || 1
      } else {
        tableData.value = []
        totalRecords.value = 0
        totalPages.value = 1
      }
    } else {
      tableData.value = []
      totalRecords.value = 0
      totalPages.value = 1
    }
  } catch (error: unknown) {
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    showError(`获取数据失败: ${errorMessage}\n请检查:\n1. 后端服务是否启动\n2. API地址是否正确\n3. 网络连接是否正常`)
    tableData.value = []
    totalRecords.value = 0
    totalPages.value = 1
  } finally {
    loading.value = false
  }
}

// 分页方法
const goToPage = (page: number) => {
  if (page >= 1 && page <= totalPages.value && page !== currentPage.value) {
    currentPage.value = page
    jumpToPage.value = page
    fetchPaymentData()
  }
}

const handleJumpToPage = () => {
  const targetPage = parseInt(jumpToPage.value.toString())
  if (targetPage >= 1 && targetPage <= totalPages.value) {
    goToPage(targetPage)
  } else {
    showWarning(`请输入1到${totalPages.value}之间的页码`)
    jumpToPage.value = currentPage.value
  }
}

// 搜索和重置方法
const handleSearch = () => {
  currentPage.value = 1
  jumpToPage.value = 1
  fetchPaymentData()
}

const handleReset = () => {
  searchForm.title = ''
  searchForm.submittedTime = ''
  searchForm.approvalStatus = ''
  searchForm.approvalByName = ''
  currentPage.value = 1
  jumpToPage.value = 1
  fetchPaymentData()
}

const handleAdd = () => {
  router.push('/AddPaymentManagemen')
}

// 批量删除
const handleDelete = async () => {
  const selectedItems = tableData.value.filter(item => item.selected)
  
  if (selectedItems.length === 0) {
    showWarning('请先选择要删除的记录')
    return
  }

  // 确认删除
  if (!confirm(`确定要删除选中的 ${selectedItems.length} 条记录吗？`)) {
    return
  }

  try {
    // 提取选中项的ID
    const ids = selectedItems.map(item => item.id).filter(id => id !== undefined) as number[]
    
    if (ids.length === 0) {
      showWarning('选中的记录缺少ID信息，无法删除')
      return
    }

    const response = await paymentApi.deletePaymentList(ids)
    
    if (response.code === 200) {
      showSuccess(`批量删除成功！共删除 ${ids.length} 条记录`)
      // 重新加载当前页数据
      fetchPaymentData()
    } else {
      showError(`批量删除失败：${response.message || '未知错误'}`)
    }
  } catch (error: any) {
    console.error('批量删除操作失败:', error)
    showError('批量删除操作失败，请检查网络连接')
  }
}

// 删除单个项目
const handleDeleteItem = async (item: PaymentItem) => {
  if (!item.id) {
    showWarning('无法删除：缺少ID信息')
    return
  }

  // 确认删除
  if (!confirm(`确定要删除"${item.title}"这条记录吗？`)) {
    return
  }

  try {
    const response = await paymentApi.deletePayment(item.id)
    
    if (response.code === 200) {
      showSuccess('删除成功！')
      // 重新加载当前页数据
      fetchPaymentData()
    } else {
      showError(`删除失败：${response.message || '未知错误'}`)
    }
  } catch (error: any) {
    console.error('删除操作失败:', error)
    showError('删除操作失败，请检查网络连接')
  }
}

const handleEdit = (item: PaymentItem) => {
  console.log('编辑:', item)
  // 跳转到编辑页面，传递记录ID
  router.push({
    path: '/UpdatePaymentManagemen',
    query: { 
      id: item.id,
      mode: 'edit'
    }
  })
}

const handleView = (item: PaymentItem) => {
  console.log('查看:', item)
  // 跳转到查看页面，传递记录ID
  router.push({
    path: '/UpdatePaymentManagemen',
    query: { 
      id: item.id,
      mode: 'view'
    }
  })
}

const handleSubmit = async (item: PaymentItem) => {
  console.log('提交审批:', item)
  
  if (!item.id) {
    showWarning('无法提交审批：缺少ID信息')
    return
  }

  // 确认提交
  if (!confirm(`确定要提交"${item.title}"进行审批吗？`)) {
    return
  }

  try {
    console.log('开始提交审批，当前item:', item)
    console.log('当前审批状态:', item.approvalStatus)
    console.log('审批类型代码:', item.approvalTypeCode)
    
      // 调用审批流程创建接口
      const response = await paymentApi.submitApproval({
        ApprovalType: item.approvalTypeCode || 'T001',  // 使用记录的ApprovalTypeCode字段，如果为空则使用默认值T001
        ApproveCode: item.id.toString(),   // 使用记录的ID
        CreatedBy: item.requester || 'admin',         // 申请人，如果为空则使用默认值
        RoundNo: 0,  // 使用0而不是null
      })
    
    console.log('API响应:', response)
    console.log('响应数据:', response.data)
    console.log('响应状态码:', response.status)
    console.log('响应数据code:', response.data?.code)
    
    // 检查API是否真正成功
    if (response.status === 200 && response.data && response.data.code === 200) {
      console.log('✅ API调用真正成功！')
      showSuccess('提交审批成功！')
      
      // 更新当前项的状态，隐藏提交审批按钮
      const currentItem = tableData.value.find(data => data.id === item.id)
      console.log('找到的当前项:', currentItem)
      
      if (currentItem) {
        console.log('更新前状态:', currentItem.approvalStatus)
        currentItem.approvalStatus = 1  // 更新为待审批状态
        console.log('更新后状态:', currentItem.approvalStatus)
        console.log('状态已更新为待审批:', currentItem)
      } else {
        console.error('未找到对应的数据项，ID:', item.id)
      }
      
      // 强制触发响应式更新
      tableData.value = [...tableData.value]
      console.log('强制更新后的tableData:', tableData.value)
      
      // 不重新加载数据，保持本地状态更新
    } else {
      console.log('❌ API调用失败！')
      console.log('HTTP状态码:', response.status)
      console.log('业务状态码:', response.data?.code)
      console.log('错误信息:', response.data?.message)
      showError(`提交审批失败：${response.data?.message || 'API调用失败'}`)
    }
  } catch (error: any) {
    console.error('提交审批操作失败:', error)
    showError('提交审批操作失败，请检查网络连接')
  }
}

const handleResubmit = async (item: PaymentItem) => {
  console.log('重新提交:', item)
  
  if (!item.id) {
    showWarning('无法重新提交：缺少ID信息')
    return
  }

  // 确认重新提交
  if (!confirm(`确定要重新提交"${item.title}"进行审批吗？`)) {
    return
  }

  try {
    // 调用审批流程创建接口
    const response = await paymentApi.submitApproval({
      ApprovalType: item.approvalTypeCode || '',  // 使用记录的ApprovalTypeCode字段
      ApproveCode: item.id.toString(),   // 使用记录的ID
      CreatedBy: item.requester || 'admin',          // 申请人，如果为空则使用默认值
      RoundNo: 0  // 添加RoundNo参数
    })
    
    if (response.data && response.data.code === 200) {
      showSuccess('重新提交审批成功！')
      
      // 更新当前项的状态，隐藏重新提交按钮
      const currentItem = tableData.value.find(data => data.id === item.id)
      if (currentItem) {
        currentItem.approvalStatus = 1  // 更新为待审批状态
        console.log('重新提交状态已更新为待审批:', currentItem)
      }
      
      // 强制触发响应式更新
      tableData.value = [...tableData.value]
      
      // 不重新加载数据，保持本地状态更新
    } else {
      showError(`重新提交审批失败：${response.data?.message || '未知错误'}`)
    }
  } catch (error: any) {
    console.error('重新提交审批操作失败:', error)
    showError('重新提交审批操作失败，请检查网络连接')
  }
}

const handleSelectAll = () => {
  tableData.value.forEach(item => {
    item.selected = selectAll.value
  })
}

const handleSelectItem = () => {
  const selectedCount = tableData.value.filter(item => item.selected).length
  selectAll.value = selectedCount === tableData.value.length
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  try {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } catch {
    return dateString
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待提交',
    1: '待审批',
    2: '已通过',
    3: '已拒绝'
  }
  return statusMap[status] || '未知'
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap: Record<number, string> = {
    0: 'status-pending',
    1: 'status-waiting',
    2: 'status-approved',
    3: 'status-rejected'
  }
  return classMap[status] || 'status-unknown'
}

// 组件挂载时加载数据
onMounted(() => {
  fetchPaymentData()
})
</script>

<style scoped>
.payment-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  gap: 20px;
  align-items: end;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.form-item label {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.form-input, .form-select {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.form-actions {
  display: flex;
  gap: 10px;
}

/* 按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}

.btn-secondary:hover:not(:disabled) {
  background: #f8f9fa;
}

/* 操作按钮区域 */
.action-section {
  background: white;
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  gap: 15px;
}

/* 表格样式 */
.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.data-table th {
  background: #f8f9fa;
  font-weight: bold;
  color: #333;
}

.data-table tbody tr:hover {
  background: #f8f9fa;
}

.checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-action {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.btn-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-edit {
  background: #17a2b8;
  color: white;
}

.btn-edit:hover {
  background: #138496;
}

.btn-delete {
  background: #dc3545;
  color: white;
}

.btn-delete:hover {
  background: #c82333;
}

.btn-view {
  background: #6c757d;
  color: white;
}

.btn-view:hover {
  background: #5a6268;
}

.btn-submit {
  background: #28a745;
  color: white;
}

.btn-submit:hover {
  background: #218838;
}

.btn-resubmit {
  background: #ffc107;
  color: #212529;
}

.btn-resubmit:hover {
  background: #e0a800;
}

.icon {
  font-size: 12px;
}

/* 状态标签样式 */
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
}

.status-waiting {
  background: #d1ecf1;
  color: #0c5460;
}

.status-approved {
  background: #d4edda;
  color: #155724;
}

.status-rejected {
  background: #f8d7da;
  color: #721c24;
}

/* 分页样式 */
.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  gap: 5px;
  align-items: center;
}

.btn-pagination {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-pagination:hover:not(.disabled):not(:disabled) {
  background: #f8f9fa;
}

.btn-pagination.active {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

.btn-pagination:disabled,
.btn-pagination.disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.pagination-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.jump-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.jump-input:disabled {
  background: #f8f9fa;
  cursor: not-allowed;
}

.loading-indicator {
  text-align: center;
  padding: 40px;
  color: #666;
  font-size: 16px;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #999;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-item {
    min-width: auto;
  }
  
  .action-section {
    flex-wrap: wrap;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .payment-management {
    padding: 10px;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 4px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
}

/* 日期输入框样式优化 */
.form-input[type="date"] {
  position: relative;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #007bff;
}

.form-input[type="date"]::-webkit-datetime-edit-text {
  color: #666;
}

.form-input[type="date"]::-webkit-datetime-edit-month-field,
.form-input[type="date"]::-webkit-datetime-edit-day-field,
.form-input[type="date"]::-webkit-datetime-edit-year-field {
  color: #333;
}
</style>

/* Toast 消息提示样式 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  font-size: 14px;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  word-wrap: break-word;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  background: #52c41a;
}

.toast-error {
  background: #ff4d4f;
}

.toast-warning {
  background: #faad14;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toast {
    right: 10px;
    left: 10px;
    max-width: none;
    transform: translateY(-100%);
  }
  
  .toast.show {
    transform: translateY(0);
  }
}


